import React,{Component} from 'react';
import {
    Form,
    Input,
    Button,
    message
} from 'antd';



class Register extends Component{

    render (){

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            size:{
            }
        }

        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        }

        const onFinish = (values: any) => {
            this.$myAxios.post('/user/addUser',values).then(res =>{
                if(res.data){
                    message.success("申请成功，请等待审核")
                    this.props.history.push('/')
                }
                else{
                    message.error("用户名重复，请重新注册")
                }
            })
        }

        return (
            <Form
                style={{marginLeft: '300px'}}
                {...formItemLayout}
                name="register"
                onFinish={onFinish}
                scrollToFirstError
            >

                <Form.Item
                    style={{marginTop: '250px'}}
                    name="username"
                    label="UserName"
                    tooltip="What do you want others to call you?"
                    rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}
                >
                    <Input
                        style={{width: '30%'}}
                    />
                </Form.Item>

                <Form.Item
                    name="email"
                    label="E-mail"
                    rules={[
                        {
                            type: 'email',
                            message: 'The input is not valid E-mail!',
                        },
                        {
                            required: true,
                            message: 'Please input your E-mail!',
                        },
                    ]}
                >
                    <Input
                        style={{width: '30%'}}
                    />
                </Form.Item>

                <Form.Item
                    name="userpwd"
                    label="Password"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your password!',
                        },
                    ]}
                    hasFeedback
                >
                    <Input.Password
                        style={{width: '30%'}}
                    />
                </Form.Item>

                <Form.Item
                    name="confirm"
                    label="Confirm Password"
                    dependencies={['password']}
                    hasFeedback
                    rules={[
                        {
                            required: true,
                            message: 'Please confirm your password!',
                        },
                        ({ getFieldValue }) => ({
                            validator(_, value) {
                                if (!value || getFieldValue('userpwd') === value) {
                                    return Promise.resolve();
                                }
                                return Promise.reject(new Error('The two passwords that you entered do not match!'));
                            },
                        }),
                    ]}
                >
                    <Input.Password
                        style={{width: '30%'}}
                    />
                </Form.Item>


                <Form.Item
                    name="phone"
                    label="Phone Number"
                    rules={[{ required: true, message: 'Please input your phone number!' }]}
                >
                    <Input
                        style={{ width: '30%' }}
                    />
                </Form.Item>


                <Form.Item
                    {...tailFormItemLayout}>
                    <Button type="primary" htmlType="submit">
                        Register
                    </Button>
                    Or <a href="/">login now!</a>
                </Form.Item>

            </Form>
        )

    }
}

export default Register;